<template>
    <div>
      <div ref="barChart" style="width: 600px; height: 400px;"></div>
      <div ref="pieChart" style="width: 600px; height: 400px; margin-top: 20px;"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    name: 'ChartComponent',
    mounted() {
      this.initCharts();
    },
    methods: {
      initCharts() {
        // 初始化柱状图
        const barChart = echarts.init(this.$refs.barChart);
        const barOption = {
          // 柱状图配置
          title: {
            text: '产品产量分布统计',
          },
          tooltip: {},
          xAxis: {
            data: ['产品A', '产品B', '产品C', '产品D'],
          },
          yAxis: {},
          series: [
            {
              name: '产量',
              type: 'bar',
              data: [10, 20, 15, 25],
            },
          ],
        };
        barChart.setOption(barOption);
  
        // 初始化饼图
        const pieChart = echarts.init(this.$refs.pieChart);
        const pieOption = {
          // 饼图配置
          title: {
            text: '产品分类产量分布统计',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              name: '分类产量',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                { value: 335, name: '分类1' },
                { value: 310, name: '分类2' },
                { value: 234, name: '分类3' },
                { value: 135, name: '分类4' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        };
        pieChart.setOption(pieOption);
      },
    },
  };
  </script>
  
  <style scoped>
  /* 样式可以根据需要调整 */
  </style>